<template>
	<view class="query_result_container">
		<view class="result_box">
			<view class="result_all" v-for="item in introduceList" :key="item.id">
				<view class="result_information_box">
					<view class="information_box">
						<view class="information_title">订单号</view>
						<view class="information_detail">
							{{ item.order_no }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title">物流名称</view>
						<view class="information_detail">
							{{ item.express_name ? item.express_name : '无' }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title">物流单号</view>
						<view class="information_detail">
							{{ item.express_no ? item.express_no : '无' }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title">收货人</view>
						<view class="information_detail">
							{{ item.contact }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title">收货电话</view>
						<view class="information_detail">
							{{ item.mobile }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title" style="width: 160rpx">收货地址</view>
						<view class="information_detail">
							{{ item.express_address }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title" style="width: 160rpx">下单时间</view>
						<view class="information_detail">
							{{ item.created_at }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title" style="width: 160rpx">开卡号码</view>
						<view class="information_detail">
							{{ item.phonenum ? item.phonenum : '暂无' }}
						</view>
					</view>

					<view class="information_box" v-if="item.open_status == 3">
						<view class="information_title" style="width: 160rpx">失败原因</view>
						<view class="information_detail">
							{{ item.open_message }}
						</view>
					</view>

					<view class="information_box">
						<view class="information_title" style="width: 160rpx">订单状态</view>
						<view class="information_detail">
							<view class="my-order-bottom-card-num" v-if="item.open_status == 0 || item.open_status == 1">待发货</view>
							<view class="my-order-bottom-card-num" v-else-if="item.open_status == 2">已发货</view>
							<view class="my-order-bottom-card-num" v-else-if="item.open_status == 3">发货失败</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import imageUrl from '@/utils/imgUrl.js';
export default {
	data() {
		return {
			introduceList: [],
			phoneNum: '',
			packageImgUrl: ''
		};
	},
	onShow() {},
	onLoad(option) {
		this.phoneNum = JSON.parse(decodeURIComponent(option.number));
		if (this.phoneNum) {
			this.getOrderDetail();
		}
		this.packageImgUrl = imageUrl.packageImgUrl;
	},
	methods: {
		// 订单查询
		getOrderDetail() {
			this.$request(
				'/getH5ManyOrder',
				{
					// mobile: '19805148040'
					mobile: this.phoneNum
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					this.introduceList = res.data.orderList;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.query_result_container {
	padding: 13rpx 20rpx 20rpx;

	.result_box {
		.result_all {
			background: #ffffff;
			border: 1px solid #f6f6f6;
			box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
			border-radius: 12rpx;
			margin-top: 12rpx;
			padding: 33rpx 26rpx 5rpx;

			.result_introduce_box {
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
				padding-bottom: 36rpx;

				.introduce_img_box {
					width: 180rpx;
					height: 180rpx;

					.introduce_img {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
				}

				.introduce_msg_box {
					.title_box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title_msg {
							width: 280rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}

						.title_status {
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #4c8bff;
						}
					}

					.tip_msg {
						width: 450rpx;
						height: 68rpx;
						font-size: 22rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						line-height: 33rpx;
						margin: 16rpx 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.tip_price {
						font-size: 30rpx;
						font-family: my-font;
						font-weight: normal;
						color: #fc3838;
						text-align: right;
					}
				}
			}

			.result_information_box {

				.information_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 41rpx;

					.information_title {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #4d4d4d;
					}

					.information_detail {
						font-size: 24rpx;
						font-family: my-font;
						font-weight: 400;
						color: #808080;
					}
				}
			}
		}
	}
}
</style>
